<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <!--        <el-col :span="12">-->
        <!--          <el-form-item :label="$t('出资人属性')" prop="investorAttr">-->
        <!--            <el-select v-if="form.dataSource === 'investment'" v-model="form.investorAttr" filterable :placeholder="$t('出资人属性')" clearable disabled>-->
        <!--              <el-option-->
        <!--                v-for="dict in investorAttrTypeOptions"-->
        <!--                :key="dict.dictValue"-->
        <!--                :label="$t(dict.dictLabel)"-->
        <!--                :value="dict.dictValue"-->
        <!--              />-->
        <!--            </el-select>-->
        <!--            <el-select v-else v-model="form.investorAttr" filterable :placeholder="$t('出资人属性')" clearable @change="investorAttr">-->
        <!--              <el-option-->
        <!--                v-for="dict in investorAttrOptions"-->
        <!--                :key="dict.dictValue"-->
        <!--                :label="$t(dict.dictLabel)"-->
        <!--                :value="dict.dictValue"-->
        <!--              />-->
        <!--            </el-select>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="12">
          <el-form-item :label="$t('出资人名称')" prop="investorName">
            <MainBodySelect
              v-if="form.dataSource === 'investment'"
              v-model="form.investorName"
              :parameters="form.investorAttr"
              disabled
            />
            <el-input
              v-else
              v-model="form.investorName"
              :placeholder="$t('出资人名称')"
              show-word-limit
              maxlength="100"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('出资人类型')" prop="investorType">
            <dict-select
              v-model="form.investorType"
              dictionary="investor_type"
              :placeholder="$t('出资人类型')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('认缴时间')" prop="subscribeTime">
            <DatePicker v-model="form.subscribeTime" :placeholder="$t('认缴时间')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('认缴金额') + $t('金额单位')" prop="subscribeAmount">
            <Money v-model="form.subscribeAmount" unit="w" :placeholder="$t('认缴金额')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('认缴比例(%)')" prop="shareRatio">
            <Ratio v-model="form.shareRatio" :placeholder="$t('认缴比例(%)')" :controls="false" :min="0" :max="100" :precision="2" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('是否为投资机构')">
            <el-radio-group v-model="form.whetherInvestOrg">
              <el-radio
                v-for="dict in whetherInvestOrgOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
              >{{ dict.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('累计实缴金额') + $t('金额单位')" prop="totalPaidIn">
            <Money v-model="form.totalPaidIn" unit="w" :placeholder="$t('累计实缴金额')" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <!--出资详情-->
      <div style="margin-top:15px;">
        <div class="area-header">
          <span class="area-header-title">{{ $t('缴款详情') }}</span>
        </div>
        <el-table tooltip-effect="darkTable" :data="form.capitalDetails" border class="nowrapTable formTable">
          <el-table-column :label="$t('序号')" align="center" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('缴款时间')" align="center" width="300">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('缴款时间') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'capitalDetails.' + scope.$index + '.actualTime'" :rules="capitalDetailsRules.actualTime">
                <DatePicker v-model="scope.row.actualTime" :placeholder="$t('缴款时间')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('缴款金额') + $t('金额单位')" align="center" width="250">
            <template slot="header" slot-scope="{}">
              <i style="color: #ff4949;margin-right: 4px;">*</i>
              <span>{{ $t('缴款金额') }}{{ $t('金额单位') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'capitalDetails.' + scope.$index + '.actualAmount'" :rules="capitalDetailsRules.actualAmount">
                <Money v-model="scope.row.actualAmount" unit="w" @change="sumMoneyColl('collection')" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column :label="$t('备注')" align="center">
            <template slot="header" slot-scope="{}">
              <span>{{ $t('备注') }}</span>
            </template>
            <template slot-scope="scope">
              <el-form-item :prop="'capitalDetails.' + scope.$index + '.remark'">
                <el-input v-model="scope.row.remark" type="textarea" class="fileTextarea" maxlength="2000" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column v-if="form.dataSource !== 'investment'" :label="$t('操作')" align="center" width="60px">
            <template slot-scope="scope">
              <el-button v-hasPermi="['bf:capital:remove']" type="text" icon="el-icon-delete" @click="delHandleDetail(scope.$index, scope.row)" />
            </template>
          </el-table-column>
        </el-table>
        <div v-if="form.dataSource !== 'investment'" class="tol">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="addDetail">{{ $t("添加") }}</el-button>
        </div>
      </div>
    </el-form>
    <div v-if="hidBtn" slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存 取消按钮-->
      <save-btn has-permi="bf:capital" :save-show="form.dataSource!=='investment'" />
    </div>
  </div>
</template>

<script>
import { saveBfCapital, getBfCapital } from '@/api/bf/capital/bfCapital'
import { delBfCapitalDetail } from '@/api/bf/capital/bfCapitalDetail'
import MainBodySelect from '@/components/MainBodySelect'
export default {
  components: {
    MainBodySelect
  },
  data() {
    return {
      // 表单参数
      form: {
        // 缴款详情
        capitalDetails: []
      },
      // 遮罩层
      loading: false,
      hidBtn: true,
      // 表单校验
      rules: {
        investorAttr: [{ required: true, message: this.$t('必填信息'),	trigger: ['change', 'blur'] }],
        investorType: [{ required: true, message: this.$t('必填信息'),	trigger: ['change', 'blur'] }],
        investorName: [{ required: true, message: this.$t('必填信息'),	trigger: ['change', 'blur'] }],
        subscribeTime: [{ required: true, message: this.$t('必填信息'),	trigger: ['change', 'blur'] }],
        subscribeAmount: [{ required: true, message: this.$t('必填信息'),	trigger: ['change', 'blur'] }],
        shareRatio: [{ required: true, message: this.$t('必填信息'),	trigger: ['change', 'blur'] }]
      },
      // 缴款详情表单验证
      capitalDetailsRules: {
        actualTime: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }],
        actualAmount: [{ required: true, message: this.$t('必填信息'),	trigger: 'blur' }]
      },
      // 是否为投资机构字典
      whetherInvestOrgOptions: [],
      // 出资人属性字典
      investorAttrOptions: [],
      investorAttrTypeOptions: []
    }
  },
  created() {
    this.getDicts('sys_yes_no').then(response => {
      this.whetherInvestOrgOptions = response.data
    })
    this.getDicts('bf_investor_attr').then(response => {
      this.investorAttrOptions = response.data
    })
    this.getDicts('deal_investment_type').then(response => {
      this.investorAttrTypeOptions = response.data
    })
  },
  methods: {
    // 初始化数据
    init(data) {
      if (data != null && data.id !== undefined) {
        getBfCapital(data.id).then(response => {
          this.form = response.data
        })
      } else {
        this.reset()
      }
    },
    // 添加缴款详情
    addDetail() {
      const row = {
        id: undefined,
        actualTime: undefined,
        actualAmount: undefined,
        remark: undefined
      }
      if (!(this.form.capitalDetails instanceof Array)) {
        this.$set(this.form, 'capitalDetails', [])
      }
      this.$nextTick(() => {
        this.form.capitalDetails.push(row)
      })
    },
    // 删除缴款详情
    delHandleDetail(index, row) {
      const id = row.id
      if (id !== undefined && id !== '' && id != null) {
        this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
          confirmButtonText: this.$t('确定'),
          cancelButtonText: this.$t('取消'),
          type: 'warning'
        })
        .then(function() {
          return delBfCapitalDetail(id)
        }).then(() => {
          this.form.capitalDetails.splice(index, 1)
          // 重新计算累计实缴金额
          this.sumMoneyColl()
          return this.msgSuccess(this.$t('删除成功'))
        })
        .catch(function() {})
      } else {
        this.form.capitalDetails.splice(index, 1)
        // 重新计算累计实缴金额
        this.sumMoneyColl()
      }
    },
    // 获取累计缴款
    sumMoneyColl() {
      if (this.form.capitalDetails !== null && this.form.capitalDetails !== undefined) {
        let temp = 0
        this.form.capitalDetails.forEach(item => {
          if (item.actualAmount !== undefined && item.actualAmount !== '') {
            temp += parseFloat(item.actualAmount)
          }
        })
        this.form.totalPaidIn = temp
      }
    },
    // 出资人属性字典翻译
    investorAttrFormat(row) {
      if (row.dataSource === 'investment') {
        return this.selectDictLabel(this.investorAttrTypeOptions, row.investorAttr)
      } else {
        return this.selectDictLabel(this.investorAttrOptions, row.investorAttr)
      }
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        dealId: this.$route.query.id,
        investorAttr: 'QT',
        investorType: undefined,
        investorId: undefined,
        investorName: undefined,
        subscribeTime: undefined,
        subscribeAmount: undefined,
        shareRatio: undefined,
        whetherInvestOrg: 'Y',
        totalPaidIn: undefined,
        dataSource: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined,
        remark: undefined
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      this.$parent.$parent.formCapitalOpen = false
      this.$parent.$parent.reset()
    },
    // 关闭form页面
    closeForm() {
      // 关闭form页面遮罩层
      this.loading = false
      // 关闭form页面
      this.$parent.$parent.formCapitalOpen = false
      // 刷新list页面
      this.$parent.$parent.getList()
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          saveBfCapital(this.form).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.closeForm()
            } else {
              this.msgError(response.msg)
            }
            this.loading = false
          })
        } else {
          this.locationError(document)
        }
      })
    },
    investorAttr() {
      this.form.investorName = undefined
    }

  }

}
</script>
